<template>
  <div class="home-page">
    <u-swiper
        :list="bannerList"
        height="350rpx"
        radius="10rpx"
        indicator
        indicatorMode="dot"
    ></u-swiper>
    <u-tabs :list="tabList" @click="tabClick"></u-tabs>
    <div class="good-list">
      <div class="good-item" v-for="(item, index) in albumList[activeIndex].urls" :key="index" @click="toPath('/pages/detail/detail?pIndex=' + activeIndex + '&cIndex=' + index)">
        <div class="good-cover">
          <image
              :src="item.url"
              mode="aspectFill"
              width="345"
              height="345"
              duration="450"
              :lazy-load="true"
              :fade="true"
              style="max-width: 100%;max-height: 100%;"
          ></image>
        </div>
        <div class="good-content">
          <div class="good-name">{{item.title}}</div>
          <div class="good-price">价格：咨询客服</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { bannerList, albumList } from "@/config/album-free";
export default {
  name: '首页',
  data() {
    return {
      bannerList,
      albumList,
      activeIndex: 0,
      tabList: []
    };
  },
  onLoad() {
    this.tabList = this.albumList.map(e => {
      return {
        name: e.name
      }
    })
  },
  methods: {
    tabClick(e) {
      this.activeIndex = e.index
    },
    toPath(url) {
      uni.navigateTo({
        url,
      });
    },
  }
}
</script>

<style scoped lang="scss">
.home-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 20rpx;
  .good-list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .good-item {
      width: 345rpx;
      background: #fff;
      margin-top: 20rpx;
      border-radius: 8rpx;
      overflow: hidden;
      .good-cover {
        width: 345rpx;
        height: 345rpx;
      }
      .good-content {
        padding: 20rpx;
        .good-name {
          text-overflow: ellipsis;
          white-space: wrap;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          font-size: 32rpx;
        }
        .good-price {
          color: #ccc;
          font-size: 28rpx;
          margin-top: 10rpx;
        }
      }
    }
  }
}
</style>